<template>
    <view class="dashed-bottom-wrapper">
        <view class="left"></view>
        <view class="line"></view>
        <view class="right"></view>
    </view>
</template>

<script>
export default {}
</script>

<style lang="scss">
.dashed-bottom-wrapper {
    display: flex;
    align-items: center;
    height: 48rpx;

    .left,
    .right {
        width: 24rpx;
        height: 48rpx;
        background-color: #f7f7f7;
    }

    .left {
        border-radius: 0 24rpx 24rpx 0;
    }

    .right {
        border-radius: 24rpx 0 0 24rpx;
    }

    .line {
        flex: 1;
        border-bottom: 2rpx dashed $color-gray-3;
    }
}
</style>
